<%--
  Created by IntelliJ IDEA.
  User: 张国庆
  Date: 2019/9/11
  Time: 14:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>上师管理系统</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript">
            layui.use(["table","form","layer"],function () {
                var table=layui.table;
                var form=layui.form;
                var layer=layui.layer;
                table.render({
                    elem:"#myTable",
                    url:"guru/showAllGuru",
                    page:true,
                    cols:[[
                        {title:"上师编号",field:"gid"},
                        {title:"上师姓名",field:"gname"},
                        {title:"上师图片",field:"pic",templet:"#GuruUrl"},
                        {title:"上师法名",field:"nickName"},
                        {title:"上师状态",field:"status",templet:"#statu"},
                        {title:"操作",templet:"#cz"},
                    ]]
                })
            })

        function deleteGuru(id) {
            layui.use(["layer","table","form"],function () {
                var table=layui.table;
                var form=layui.form;
                var layer=layui.layer;
                layer.confirm("确定删除该条数据吗?",function (data) {
                    $.ajax({
                        url:"guru/deleteGuru",
                        data:"id="+id,
                        success:function (data) {
                            if(data.isDelete){
                                layer.alert("删除成功",{time:2000});
                            }else {
                                layer.alert("删除失败",{time:2000});
                            }
                            table.reload("myTable");
                        }
                    })
                })
            })
        }
        function add() {
                $("#gid").val(0);
                $("#status").val(0);
                $("#addSubMit").show();
                $("#updateSubMit").hide();
            layui.use(["layer","table","form"],function () {
                var table=layui.table;
                var form=layui.form;
                var layer=layui.layer;
                layer.open({
                    title:"添加上师信息",
                    content:$("#addForm"),
                    type:1
                })
            })
        }
            //普通图片上传
            layui.use(['upload', 'layer','element','table'], function () {
                var element = layui.element;
                var $ = layui.jquery,upload = layui.upload;
                var layer = layui.layer;
                var table = layui.table;
                var uploadInst = upload.render({
                    elem: '#test1'
                    , url: 'guru/insertGuru'
                    , data: {
                        //携带其他参数
                        gname: function () {
                            //返回标签的value值
                            return $('#gname').val();
                        }, status: function () {
                            return $("[name='status']:checked").val();
                        }, nickName: function () {
                            return $('#nickName').val();
                        }
                    }
                    //禁止文件上传组件自动上传
                    , auto: false
                    //绑定提交按钮,点击按钮时上传
                    , bindAction: "#addSubMit"
                    , choose: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#imgdemo1').attr('src', result); //图片链接（base64）
                        });

                    }
                    , done: function (res) {
                        layer.closeAll('page');
                        layer.alert(res.isInsert, {time: 3000});
                        table.reload('myTable')
                    }
                })
            });
        //批量上传
            layui.use(['upload', 'layer','element','table'], function () {
                var element = layui.element;
                var $ = layui.jquery, upload = layui.upload;
                var layer = layui.layer;
                var table = layui.table;
                var uploadInst = upload.render({
                    elem: '#addAll',
                    url: 'guru/addAll',
                    accept:"file",
                    done: function (res) {
                        layer.closeAll('page');
                        layer.alert(res.isInsert, {time: 3000});
                        table.reload('myTable')
                    }
                })
            })
        function  showOne(id) {
            $.ajax({
                url:"guru/showOne",
                data:"id="+id,
                success:function (data) {
                    $("#gid").val(data.gid);
                    $("#gname").val(data.gname);
                    $("#nickName").val(data.nickName);
                    $("#status").val(0);
                }
            })
            $("#addSubMit").hide();
            $("#updateSubMit").show();
            layui.use("layer",function () {
                var layer=layui.layer;
                layer.open({
                    title:"修改信息",
                    content:$("#addForm"),
                    type:1
                })
            })
            layui.use(["layer","table","form"],function () {
                var table = layui.table;
                var form = layui.form;
                var layer = layui.layer;
                form.on("submit(update)",function (data) {
                    $.ajax({
                        url:"guru/updateGuru",
                        data:data.field,
                        success:function (data) {
                            if(data.isUpdate){
                                layer.alert("修改成功",{time:2000});
                            }else {
                                layer.alert("修改失败",{time:2000});
                            }
                            table.reload("myTable");
                        }
                    })
                })
            })
        }
    </script>
    <style>
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }
    </style>
    <script id="GuruUrl" type="text/html">
        <img src="${pageContext.request.contextPath}{{= d.pic }}" alt="{{= d.pic }}">
    </script>
    <script id="statu" type="text/html">
        {{#  if(d.status == 1){ }}
        不显示
        {{#  } else { }}
        显示
        {{#  } }}
    </script>
</head>
<body>
<button type="button" class="layui-btn" onclick="add()">
    <i class="layui-icon" >&#xe608;</i> 添加
</button>
<button type="button" class="layui-btn" id="addAll" >
    <i class="layui-icon" >&#xe608;</i> 批量添加
</button>
<table id="myTable"></table>
<div id="cz" style="display: none">
    <button type="button" class="layui-btn layui-btn-normal" onclick="showOne('{{d.gid}}')">修改</button>
    <button type="button" class="layui-btn layui-btn-danger" onclick="deleteGuru('{{d.gid}}')">删除</button>
</div>
<form id="addForm" style="display: none;padding: 15px" class="layui-form" enctype="multipart/form-data">
    <div class="layui-form-item" id="departmentId_div">
        <label class="layui-form-label">上师编号</label>
        <div class="layui-input-block">
            <input name="gid" id="gid" class="layui-input" readonly/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师姓名</label>
        <div class="layui-input-block">
            <input name="gname" id="gname" class="layui-input" placeholder="请输入上师名字" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选择要上传图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo1">
                <p id="demoText"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师法名</label>
        <div class="layui-input-block">
            <input type="text" name="nickName" id="nickName" class="layui-input" placeholder="" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择图片的状态</label>
        <div class="layui-input-block">
            <%--<input type="checkbox" id="status" name="status" lay-skin="switch" lay-text="显示|不显示">--%>
            <input type="radio" name="status" value="0" title="显示">
            <input type="radio" name="status" value="1" title="不显示" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <button  type="button" lay-submit lay-filter="adds" class="layui-btn" id="addSubMit">添加</button>
        <button  type="button" lay-submit lay-filter="update" class="layui-btn" id="updateSubMit">修改</button>
        <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
</body>
</html>
